<template>
    <!-- <div>nepgView网格员</div> -->
    <div class="nepg-view" :style="{ backgroundImage: `url(${bg3})` }">
        <el-container class="nepg-container">
            <el-header class="nepg-header">
                <headerView></headerView>
            </el-header>
            <el-main class="nepg-main">
                <img :src="bg3" alt="">
                <div class="main">
                    <el-button-group class="btns">
                        <el-button type="primary" @click="getList(0)">全部</el-button>
                        <el-button type="primary" @click="getList(1)">未上传</el-button>
                        <el-button type="primary" @click="getList(2)">已上传</el-button>
                    </el-button-group>
                    <div class="table">
                        <el-table :data="dataList.data" border empty-text="暂无收到派遣">
                            <el-table-column prop="id" label="id" width="75" align="center " />
                            <el-table-column prop="city" label="城市" align="center" width="150" />
                            <el-table-column prop="date" label="反馈时间" align="center" width="200" />
                            <el-table-column prop="estimateAqi" label="风险等级预估" align="center" width="120">
                                <template #default="scope">
                                    <el-tag effect="plain" :color="color[scope.row.estimateAqi - 1]" style="width: 20px;
                        height: 20px;">
                                    </el-tag>
                                    <div>{{ scope.row.estimateAqi + '级污染' }}</div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="feedback" label="监督员反馈" align="center">
                                <template #default="scope">
                                    <el-link type="primary" @click="getFeedback(scope.row.city, scope.row.reason)">
                                        <div class="feed-back">
                                            {{ 'link' }}
                                        </div>
                                    </el-link>
                                </template>
                            </el-table-column>
                            <el-table-column prop="status" label="状态" align="center" width="75">
                                <template #default="scope">
                                    <div v-if="scope.row.status === 1">未提交</div>
                                    <div v-if="scope.row.status === 2">已提交</div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="co" label="一氧化碳(CO)/(ug/m3)" align="center">
                                <template #default="scope">
                                    <div>{{ scope.row.co ? scope.row.co : '未测量' }}</div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="so2" label="二氧化硫(SO2)/(ug/m3)" align="center">
                                <template #default="scope">
                                    <div>{{ scope.row.so2 ? scope.row.so2 : '未测量' }}</div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="pm2_5" label="悬浮颗粒物(PM2.5)/(ug/m3)" align="center">
                                <template #default="scope">
                                    <div>{{ scope.row.pm ? scope.row.pm : '未测量' }}</div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="aqi" label="测量结果等级" align="center" width="120">
                                <template #default="scope">
                                    <div v-if="scope.row.aqi != 0">
                                        <el-tag effect="plain" :color="color[scope.row.aqi - 1]"
                                            style="width: 20px;height: 20px;">
                                        </el-tag>
                                        <div>{{ scope.row.aqi + '级污染' }}</div>
                                    </div>
                                    <div v-else>{{ '未测量' }}</div>

                                </template>
                            </el-table-column>
                            <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
                                <template #default="scope">
                                    <el-button link type="primary" size="small"
                                        @click="openUpLoadView(scope.row.city, scope.row.id)"
                                        :disabled="scope.row.status === 2">上传数据</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div style="display: flex;justify-content: center;">
                            <el-pagination style="margin: 20px 0;" background layout="prev, pager, next"
                                :total="tablePage.totalCount" @current-change="currPage" />
                        </div>
                    </div>
                    <el-dialog v-model="upLoadData.dialogVisible" title="上传该城市的空气污染情况" width="30%"
                        :before-close="handleClose">
                        <div class="form">
                            <el-form ref="formRef" :model="upLoadData" label-position="left" label-width="200px"
                                :rules="rules">
                                <el-form-item label="城市:">
                                    <div style="font-weight: 600;color:#409EFF;">{{ cityName }}</div>
                                </el-form-item>
                                <el-form-item label="一氧化碳(CO)/(ug/m3)" prop="co">
                                    <el-input-number v-model="upLoadData.co" :min="0" />
                                </el-form-item>
                                <el-form-item label="二氧化硫(SO2)/(ug/m3)" prop="so2">
                                    <el-input-number v-model="upLoadData.so2" :min="0" />
                                </el-form-item>
                                <el-form-item label="悬浮颗粒物(PM2.5)/(ug/m3)" prop="pm">
                                    <el-input-number v-model="upLoadData.pm" :min="0" />
                                </el-form-item>
                            </el-form>
                        </div>
                        <template #footer>
                            <span class="dialog-footer">
                                <el-button type="primary" @click="subData">
                                    上传该城市数据
                                </el-button>
                            </span>
                        </template>
                    </el-dialog>
                </div>
            </el-main>
        </el-container>
    </div>
</template>


<script setup lang="ts">
import headerView from '../../components/common/header.vue'
import { ElMessageBox } from 'element-plus'
import type { FormRules } from 'element-plus'
import { onMounted, reactive, ref, inject } from 'vue'
import { get, post } from '../../utils/index.ts'
const Message = inject('$message') as any
import bg3 from '../../assets/images/3.jpg'

const color = ['#02E300', '#FFFF00', '#FF7E00', '#FE0000', '#98004B', '#7E0123']
onMounted(() => {
    getList()
})
const getList = async (isDone: number = 0) => {
    tablePage.isDone = isDone
    let data = {
        page: tablePage.pageIndex,
        limit: tablePage.pageSize,
        isDone: isDone === 0 ? null : isDone,//0全部，1未上传，2已上传
    }
    let res: any = await get('/sys/referdate/Tlist', data)
    if (res && res.code === 0) {
        dataList.data = res.page.list
        tablePage.pageIndex = res.page.currPage
        tablePage.totalCount = res.page.totalCount
        tablePage.totalPage = res.page.totalPage
    }
}

const dataList = reactive({ data: [] })
const tablePage = reactive({
    pageIndex: 1,
    pageSize: 10,
    totalCount: 0,
    totalPage: 0,
    isDone: 0,
})
const currPage = (e: any) => {
    tablePage.pageIndex = e
    getList()
}
const getFeedback = (city: any, feedback: any) => {
    ElMessageBox.alert(feedback, `城市：${city}`, {
        confirmButtonText: 'OK',
    })
}
const cityName = ref('cityName')
const upLoadData = reactive({
    dialogVisible: false,
    co: null,
    so2: null,
    pm: null,
    id: null,
})
const formRef = ref(null)
const subData = async () => {
    const form = formRef.value as any
    form.validate((valid: boolean) => {
        if (valid) { } else {
            Message.info('表单校验失败')
            return
        }
    })
    let data = {
        ...upLoadData,
        referId: upLoadData.id
    }
    let res: any = await post('/sys/testdata/save', data)
    if (res && res.code === 0) {
        getList()
        Message.success('上传成功')
        handleClose()
    } else {
        Message(`msg:${res.msg};code:${res.code}`)
    }
}

const rules = reactive<FormRules<typeof upLoadData>>({
    co: [{ required: true, message: '一氧化碳(CO)浓度不能为空', trigger: 'blur' }],
    so2: [{ required: true, message: '二氧化硫(SO)浓度不能为空', trigger: 'blur' }],
    pm: [{ required: true, message: '悬浮颗粒物(PM2.5)浓度不能为空', trigger: 'blur' }],
})
const handleClose = () => {
    upLoadData.dialogVisible = false
    upLoadData.co = null
    upLoadData.so2 = null
    upLoadData.pm = null
    cityName.value = 'cityName'
}
const openUpLoadView = (city: string, id: any) => {
    upLoadData.dialogVisible = true
    cityName.value = city
    upLoadData.id = id
}





</script>

<style lang="scss" scoped>
.nepg-view {
    height: 100vh;
    width: 100vw;
    // background-image: url('../../assets/images/3.jpg');

    .nepg-container {
        height: 100%;
        width: 100%;

        .nepg-header {
            padding: 0;
        }

        .nepg-main {
            background-color: #f2f3f5;
            padding: 0;
            position: relative;

            img {
                position: fixed;
                width: 100%;
                height: 100%;
            }

            .main {
                // position: absolute;
                opacity: .9;
                z-index: 1;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                // justify-content: space-around;
                margin: 0 auto;
                width: 80%;
                min-height: 100%;
                background-color: #fff;
                padding: 20px 20px;
                box-sizing: border-box;

                .btns {
                    margin: 0px 30px 20px;
                }

                .table {
                    background-color: #f2f3f5;
                    padding: 40px 20px;
                    width: 97%;
                    box-sizing: border-box;
                    border-radius: 20px;

                    .feed-back {
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                }
            }
        }
    }
}
</style>